import React, {ReactNode, useEffect, useRef, useState} from 'react'
import {Button, Space, Table, TableColumnsType} from "antd";
import {ColumnsType} from "antd/es/table";
import {ResPage, ResultData} from "../../../api/interface";
import {deleteMenu, getAllMenus, getMenuList,getByPid} from "../../../api/modules/menu";
import ModalCom from "./Model";
import * as Icons from "@ant-design/icons";

interface DataType {
    children: any;
    key: string;
    name: string;
    description:string,
    id: number;
}
interface ExpandedDataType {
    id: React.Key;
    name: string;
    description: string;
}
function Role(){
    const [data, setData] = useState<any>([]);
    const modalRef = useRef<any>(null);
    const [paginationParams, setPaginationParams] = useState<any>({
        pageSize: 10,
        pageNum: 1,
        total: 20,
    });

    const handleExport = async (record:any) => {
        addModal(record)
    };
    const handleDelete = async ({ id }: { id: number }) => {
        const result = await deleteMenu(id);
        if (result.data) {
            getAllMenu();
        }
    };

    const onChange = async (page: number, pageSize: number) => {
        setPaginationParams({ ...paginationParams, pageNum: page, pageSize });
    };
    const handleAdd = (record:any)=>{
        addModal(record,true)
    }

    useEffect(()=>{
        getAllMenu()
    },[])
const  getAllMenu = async ()=>{
  let  { data } = await getAllMenus();
  deleteChildren(data);
  console.log(data,'data')
  setData(data)
}
const deleteChildren = (data:any)=>{
    if(Array.isArray(data)){
        data.forEach(item=>{
            if(!item.children || !item.children.length){
                 delete item.children
            }else{
                deleteChildren(item.children)
            }
        })
    }
}
    const addModal = (record?: DataType,boo:boolean = false) => {
        if (record && boo) {
            modalRef.current!.showModal(record,boo);
        } else {
            modalRef.current!.showModal(record);
        }
    };
    const customIcons: { [key: string]: any } = Icons;
    const columns: ColumnsType<DataType> = [
        {
            title: "角色",
            dataIndex: "name",
            key: "name",
            render: (text) => <a>{text}</a>,
        },
        {
            title: "路径",
            dataIndex: "path",
            key: "path",
        },
        {
            title: "图标",
            dataIndex: "icon",
            key: "icon",
            render: (text) =>{
                return text ? React.createElement(customIcons[text]) : null;
            }
        },
        {
            title: "描述",
            dataIndex: "description",
            key: "description",
        },
        {
            title: "Action",
            key: "id",
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => handleExport(record)}>编辑</a>
                    <a onClick={() => handleDelete(record)}>删除</a>
                    <a onClick={() => handleAdd(record)}>添加子菜单</a>
                </Space>
            ),
        },
    ];
    return (

        <>
            <Space>
                <Button type="primary" onClick={() => addModal()}>
                    新增
                </Button>
            </Space>
            <Table
                rowKey="id"
                columns={columns}
                dataSource={data}
                pagination={false}
            />
            <ModalCom ref={modalRef} getList={getAllMenu}></ModalCom></>
    )
}

export default Role;